<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	template="/templates/mobileTemplate.xhtml">
	
	<ui:define name="style">
		<style type="text/css">
			ul {
				list-style: none;
				list-style-type: none;
				padding: 0px;
				margin: 0px;
				font-size: 8;
				
			}
			ul #label {
				font-weight: bold;
				padding-top: 2px;
			}
			ul li {
				font-size: 12px;
			}
			#painelDados #painelAssuntos #painelPolos #painelMov , p { 
				display: none;
			}
			#painelDados #painelAssuntos #painelPolos #painelMov , div { 
				font-size: 12px;
			}
			#tablePolos th{
				border: 1px solid #cccccc;
				background-color: #eeeeee;
				padding: 5px;
				font-size: 12px;
			}
			#tablePolos td {
				padding-right: 10px;
				padding-left: 2px;
				margin-left: 0;
				border-bottom: 1px solid #cccccc;
				border-right: 1px solid #cccccc;
			}
			#tableMov #tableAssuntos , th{
				border: 1px solid #cccccc;
				background-color: #eeeeee;
				padding: 5px;
			}
			#tableMov #tableAssuntos , td {
				padding-right: 10px;
				padding-left: 5px;
				margin-left: 0;
				border-bottom: 1px solid #cccccc;
				border-right: 1px solid #cccccc;
			}
			#tableMov #tableAssuntos , #tdleft{
				border-left: 1px solid #cccccc;
				text-align: center;
			}
			.ui-collapsible-content {
				padding-left: 5px;
			}
			
		</style>
	</ui:define>
	
	<ui:define name="javascript">
		<script>
			$(document).bind("pageinit", function(){
				$("div[id*='painel'] a").removeClass("ui-fullsize").addClass("ui-mini");
				$("div[id*='painel'] a").show();
			});
		</script>
	</ui:define>
	
	<ui:define name="content">

		<!-- Main View -->
		<pm:view id="processoView">
			<pm:header title="#{msg['label.aplicacao.nome']}">
				<f:facet name="left">
					<p:button value="#{msg['botao.sair']}" icon="signout"
						outcome="sair" />
				</f:facet>
				<f:facet name="right">
					<p:button value="#{msg['botao.voltar']}" icon="back" outcome="home" />
				</f:facet>
			</pm:header>
			
			<pm:content>
            	<h:form id="formProcesso" prependId="false">
            		<p:panel header="#{msg['processo.titulo.dados']}" collapsed="false" id="painelDados">
            			<ul>
            				<li id="label">#{msg['processo.npu']}:</li>
            				<li>#{processoMobileBean.processoJudicial.dadosBasicos.numero.value}</li>
            				<li id="label">#{msg['processo.tribunal']}:</li>
            				<li>#{processoMobileBean.entidade.tribunal.nome}</li>
            				<li id="label">#{msg['processo.tipoJuizo']}:</li>
            				<li>#{(processoMobileBean.entidade.tipoJuizo == 'PRIMEIRO_GRAU') ? msg['processo.tipoJuizo.1g'] : msg['processo.tipoJuizo.2g']}</li>
            				<li id="label">#{msg['processo.orgaoJulgador']}:</li>
            				<li>#{processoMobileBean.processoJudicial.dadosBasicos.codigoOrgaoJulgador}</li>
            				<li id="label">#{msg['processo.classeProcessual']}:</li>
            				<li>#{processoMobileBean.processoJudicial.dadosBasicos.classeProcessual}</li>
            			</ul>
            		</p:panel>
            		<p:panel header="#{msg['processo.assuntos']}" collapsed="false" id="painelAssuntos">
            			<div align="center">
            			<table id="tableAssuntos">
							<thead>
								<tr>
									<th scope="col">#{msg['processo.assunto.codigoNacional']}</th>
									<th scope="col">#{msg['processo.assunto.isPrincipal']}</th>
								</tr>
							</thead>
							<tbody>
								<ui:repeat var="assunto" value="#{processoMobileBean.processoJudicial.dadosBasicos.assunto}">
									<tr>
										<td id="tdleft">
											<h:outputText value="#{assunto.codigoNacional}" />
										</td>
										<td align="center">
											<h:outputText value="#{assunto.principal ? msg['label.sim'] : msg['label.nao']}" />
										</td>
									</tr>
								</ui:repeat>
							</tbody>
						</table>
						</div>
            		</p:panel>
            		<p:panel header="#{msg['processo.polos']}: " collapsed="false" id="painelPolos">
            			<div align="center">
						<table id="tablePolos">
							<thead>
								<tr>
									<th scope="col">#{msg['processo.polo.modalidadePolo']}:</th>
									<th scope="col">#{msg['processo.polo.parte.nome']}:</th>
									<th scope="col">#{msg['processo.polo.parte.advogado']}:</th>
								</tr>
							</thead>
							<tbody>
							<ui:repeat var="polo"
								value="#{processoMobileBean.processoJudicial.dadosBasicos.polo}">
								<tr>
									<th scope="rowgroup">
										<h:outputText
											value="#{msg['processo.polo.modalidadePolo.at']}"
											rendered="#{polo.polo.name() eq 'AT'}" />
										<h:outputText
											value="#{msg['processo.polo.modalidadePolo.pa']}"
											rendered="#{polo.polo.name() eq 'PA'}" />
									</th>
									<ui:repeat var="parte" value="#{polo.parte}">
										<td scope="row">#{parte.pessoa.nome}</td>
										<td scope="row">
											<ul>
												<ui:repeat var="advogado" value="#{parte.advogado}">
					            					<li>#{advogado.inscricao.value} - #{advogado.nome}</li>
					            				</ui:repeat>
					            			</ul>
										</td>
									</ui:repeat>
								</tr>
							</ui:repeat>
							</tbody>
						</table>
						</div>
					</p:panel>
            		<p:panel header="#{msg['processo.movimentacoes']}: " collapsed="false" id="painelMov">
            			<div align="center">
            			<table id="tableMov">
							<thead>
								<tr>
									<th scope="col">#{msg['processo.movimento.dataHora']}</th>
									<th scope="col">#{msg['processo.movimento.identificador']}</th>
									<th scope="col">#{msg['processo.movimento.movimentoNacional']}</th>
								</tr>
							</thead>
							<tbody>
							<ui:repeat var="movimento"
								value="#{processoMobileBean.processoJudicial.movimento}">
								<tr>
									<td id="tdleft">
										<h:outputText value="#{movimento.dataHora.value}" converter="PJeDataHoraConverter"  />
									</td>
									<td align="center">
										<h:outputText value="#{movimento.identificadorMovimento}" />
									</td>
									<td>
										<ul>
											<ui:repeat var="complemento" value="#{movimento.movimentoNacional.complemento}">
				            					<li>#{complemento.value}</li>
											</ui:repeat>
										</ul>
									</td>
								</tr>
							</ui:repeat>
							</tbody>
						</table>
            			</div>
            		</p:panel>
            	</h:form>
			</pm:content>
		</pm:view>
	</ui:define>
</ui:composition>
